import React, { Component } from 'react';
import './common.scss';
class Com extends Component {

  goDetail = (id) => { 
    console.log(this.props)
    this.props.history.push('/book/child/detail')
  }
  render () {
     console.log(this.props)
    const img = this.props.data.image;
    const { alt, title,id,intro,Name,ability,price,leng,NeedTime,buyer,images} = this.props.data;
    return (
      <div className='wrapper-big'>
      <div className = "movieItem" onClick = { this.goDetail.bind(this,id)}>
        <div className = "movieImg">
          <img style = {{ cursor:'pointer' }} src = { img } alt = { alt } />
        </div>
        <div className = "movieTitle">
          <h3 style = {{ cursor:'pointer' }} >{ title }</h3>
          <p><span style = {{ cursor:'pointer' }}>{ intro } </span></p>
          <p><img src = { images } alt = { alt } style = {{ width:'20px',height:'20px',border:'1px solid #cecece',borderRadius:'50%',cursor:'pointer'}}/><span style = {{ marginLeft : '18px',color:'#777 !importent',cursor:'pointer'}}>{ Name }</span><span style = {{ marginLeft : '6px' ,cursor:'pointer'}}>{ ability }</span></p>
          <p><span style = {{ color: '#ed7b11' ,cursor:'pointer'}} >{ price }</span><span style = {{ marginLeft : '18px' ,cursor:'pointer'}}>{leng}</span><span style = {{ marginLeft : '18px',cursor:'pointer' }}>{ NeedTime }</span> <span style = {{ marginLeft : '18px',cursor:'pointer' }}>{ buyer }</span></p>
        </div>
        <div>
        </div>
      </div>
      </div>
    )
  }
}

export default Com;